<template>
  <div class="container">
<navSearch :show-before="false" :formList="formList" @btnSearch="btnSearch">
      </navSearch>
    <el-row :gutter="30" style="margin-bottom:15px" >
      <el-col :span="4">
        <el-card shadow="never">
          店铺数量：{{storeCount}}
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card shadow="never">
          共享店铺数量：{{shareStoreCount}}
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card shadow="never">
          销售总额：{{turnoverCount}}
        </el-card>
      </el-col>
    </el-row>
    <el-table
      :data="tableData"
      style="width: 100%"
      :default-sort = "{prop: 'saleroom', order: 'descending'}"
      >
      <el-table-column
        prop="id"
        label="店铺编号"
        align="center"
        >
      </el-table-column>
      <el-table-column
        prop="name"
        label="店铺名称"
        >
      </el-table-column>
      <el-table-column
        prop="business"
        label="店铺行业">
      </el-table-column>
      <el-table-column
        prop="address"
        label="店铺地址">
      </el-table-column>
      <el-table-column
        prop="mobile"
        label="联系电话">
      </el-table-column>
      <el-table-column
        prop="promotionId"
        label="推广人ID">
      </el-table-column>
      <el-table-column
        prop="equity"
        label="权益级别">
      </el-table-column>
      <el-table-column
        prop="timeout"
        label="权益时限">
      </el-table-column>
      <el-table-column
        prop="saleroom"
        sortable
        label="销售额" width="90px">
      </el-table-column>
      <el-table-column
        prop="operation"
        label="运营状态">
      </el-table-column>
      <el-table-column prop="status" label="状态">
        <template #default="{ row }">
          {{row.status == 0 ? '启用':'停用'}}
        </template>
      </el-table-column>
      <el-table-column
        prop="remark"
        label="备注">
      </el-table-column>
      <el-table-column label="操作" width="290px">
        <template #default="{row}"  >
          <el-row style="margin-bottom:20px" type="flex" justify="start">
            <el-button size="mini" @click="$router.push({path:`details/${row.id}`})">详情</el-button>
            <el-button size="mini" @click="$router.push({name:'goodsList'})">查看商品</el-button>
            <el-button size="mini" @click="$router.push({path:`manage/${row.id}`})">经营分析</el-button>
          </el-row>
          <el-row type="flex" justify="start" >
            <el-button size="mini" @click="openStore(row.id)">{{row.status == 0 ? '停用':'启用'}}</el-button>
            <el-button size="mini" @click="removeStore(row.id)">删除</el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>
    <div style="width:100px;height:100px">
    </div>
  </div>
</template>
<script>
import { getStoreList, removeStore, updateStoreState } from '@/api/storeManage'
export default {
  data () {
    return {
      tableData: [],
      turnoverCount: 0,
      storeCount: 0,
      shareStoreCount: 0,
      formList: {
        store: true,
        firmNameS: true

      }
    }
  },
  methods: {
    removeStore (id) {
      this.$confirm('确定删除该店铺？').then(async () => {
        await removeStore(id)
        this.$message.success('删除成功')
      })
      this.getStoreList()
    },
    async openStore (id) {
      const store = this.tableData.find(v => id === v.id)
      store.status = store.status ? 0 : 1
      await updateStoreState(store)
      this.$message.success('操作成功')
    },
    async getStoreList () {
      this.tableData = await getStoreList()
      this.turnoverCount = this.tableData.reduce((sum, v) => {
        sum += parseFloat(v.saleroom)
        return sum
      }, 0)
      this.storeCount = this.tableData.reduce((sum, v) => {
        sum += 1
        return sum
      }, 0)
      this.shareStoreCount = this.tableData.reduce((sum, v) => {
        if (v.operation === '共享经营') {
          sum++
        }
        return sum
      }, 0)
    },
    btnSearch (formData) {
      // alert('政政猪仔')
      const { store, goods, goodsType } = formData
      if (store || goods || goodsType) {
        const arr = this.tableData.filter(item => item.name === store || store === '')
        console.log(this.tableData);
        this.tableData = arr
      } else {
        this.getStoreList()
      }

    }
  },
  created () {
    this.getStoreList()
  }
}
</script>
<style>
.el-table  .cell{
  text-align: center!important;
}
</style>
